<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>滚动监听body区域</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<style>
			body {
				position: relative;
				top: 50px;
			}

			p {
				height: 400px;
			}
		</style>
	</head>

	<body>
		<!-- 菜单导航 -->
		<nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#h5">HTML5</a></li>
				<li><a href="#c3">CSS3</a></li>
				<li><a href="#jquery">jQuery</a></li>
				<li><a href="#boot">Bootstrap</a></li>
			</ul>
		</nav>

		<h4 id="h5">HTML5</h4>
		<p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。</p>
		<h4 id="c3">CSS3</h4>
		<p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。<br>
			CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。</p>
		<h4 id="jquery">jQuery</h4>
		<p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do
			More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
		</p>
		<h4 id="boot">Bootstrap</h4>
		<p>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web
			开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking
			News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
		</p>

	</body>

</html>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
  $('body').scrollspy({ 'target': '#navbar-example','offset':60})
</script>
